<template>
  <view class="workspace-container">
    <!-- 自定义导航栏 -->
    <cu-custom bgColor="bg-gradual-blue" :isBack="false">
      <block slot="content">工作台</block>
    </cu-custom>

    <!-- 动态加载部门工作台 -->
    <view v-if="userInfo.departName">
      <!-- 生产部工作台 - 区分管理员和员工 -->
      <template v-if="userInfo.departName.includes('生产')">
        <ProductionAdminWorkspace v-if="isProductionAdmin" />
        <ProductionWorkspace v-else />
      </template>
      
      <!-- 仓储部工作台 -->
      <WarehouseWorkspace v-else-if="userInfo.departName.includes('仓储')" />
      
      <!-- 其他部门工作台 -->
      <view v-else class="default-workspace padding text-center">
        <text class="text-gray">{{ userInfo.departName }}工作台开发中...</text>
      </view>
    </view>
  </view>
</template>

<script>
import authService from "../../src/services/auth.js";
import {
  getAccessibleModules,
  getQuickActions,
} from "../../src/config/role.js";
import WarehouseWorkspace from "../../components/workspace/WarehouseWorkspace.vue";
import ProductionWorkspace from "../../components/workspace/ProductionWorkspace.vue";
import ProductionAdminWorkspace from "../../components/workspace/ProductionAdminWorkspace.vue";

export default {
  components: {
    WarehouseWorkspace,
    ProductionWorkspace,
    ProductionAdminWorkspace,
  },

  data() {
    return {
      userInfo: {},
      currentRole: null,
      showSearch: false,
      searchKeyword: "",
      searchResults: [],
      todoList: [],
      roleFunctions: [],
      recentActions: [],
    };
  },

  computed: {
    // 判断是否为生产管理员
    isProductionAdmin() {
      return this.currentRole && this.currentRole.type === 'admin' && 
             this.userInfo.departName && this.userInfo.departName.includes('生产')
    }
  },

  onLoad() {
    this.initPage();
  },

  onShow() {
    this.refreshData();
  },

  methods: {
    initPage() {
      if (!authService.isLoggedIn()) {
        uni.reLaunch({
          url: "/pages/login/login",
        });
        return;
      }

      this.loadUserInfo();
      this.loadTodoList();
      this.loadRoleFunctions();
      this.loadRecentActions();
    },

    loadUserInfo() {
      this.userInfo = authService.getCurrentUser() || {};
      this.currentRole = authService.getCurrentRole();
    },

    formatTime(time) {
      const now = new Date();
      const diff = now - new Date(time);
      const minutes = Math.floor(diff / 60000);

      if (minutes < 1) return "刚刚";
      if (minutes < 60) return `${minutes}分钟前`;
      if (minutes < 1440) return `${Math.floor(minutes / 60)}小时前`;
      return `${Math.floor(minutes / 1440)}天前`;
    },

    navigateTo(path) {
      if (path) {
        this.showSearch = false;
        uni.navigateTo({
          url: path,
          fail: () => {
            uni.showToast({
              title: "页面暂未开放",
              icon: "none",
            });
          },
        });
      }
    },

    refreshData() {
      this.loadTodoList();
      this.loadRecentActions();
    },

    // 判断是否为指定部门
    isDepartment(departName) {
      return this.userInfo.departName === departName;
    },

    // 加载待办事项列表
    loadTodoList() {
      // 模拟加载待办事项
      this.todoList = [
        {
          id: 1,
          title: '完成生产计划审核',
          priority: 'high',
          status: 'pending',
          dueDate: '2024-01-15'
        },
        {
          id: 2,
          title: '检查设备维护记录',
          priority: 'medium',
          status: 'progress',
          dueDate: '2024-01-16'
        }
      ];
    },

    // 加载角色功能
    loadRoleFunctions() {
      this.roleFunctions = getAccessibleModules(this.currentRole);
    },

    // 加载最近操作
    loadRecentActions() {
      // 模拟加载最近操作
      this.recentActions = [
        {
          id: 1,
          action: '创建生产计划',
          time: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
          module: '生产管理'
        },
        {
          id: 2,
          action: '完成质量检查',
          time: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
          module: '质量管理'
        }
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.workspace-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.todo-section,
.role-functions,
.recent-actions {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  margin: 0 24rpx;
}

.department-workspace {
  margin: 0 24rpx;
}

.section-header {
  border-bottom: 1rpx solid #f0f0f0;
}

.todo-item {
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .todo-priority {
    width: 8rpx;
    height: 60rpx;
    border-radius: 4rpx;

    &.priority-high {
      background-color: #f5222d;
    }

    &.priority-medium {
      background-color: #fa8c16;
    }

    &.priority-low {
      background-color: #52c41a;
    }
  }

  .todo-status {
    padding: 8rpx 16rpx;
    border-radius: 16rpx;
    font-size: 24rpx;

    &.status-pending {
      background-color: #fff7e6;
      color: #fa8c16;
    }

    &.status-progress {
      background-color: #e6f7ff;
      color: #1890ff;
    }

    &.status-completed {
      background-color: #f6ffed;
      color: #52c41a;
    }
  }
}

.function-card {
  border-radius: 12rpx;
  background-color: #fafafa;
  border: 1rpx solid #f0f0f0;

  .function-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

    .cuIcon {
      font-size: 36rpx;
    }
  }
}

.action-item {
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .action-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    .cuIcon {
      font-size: 28rpx;
    }
  }
}

.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  padding-top: 200rpx;

  .search-content {
    background-color: white;
    border-radius: 12rpx;
    margin: 0 24rpx;
    width: calc(100% - 48rpx);
    max-height: 80vh;
    overflow: hidden;

    .search-input-wrapper {
      position: relative;

      .search-input {
        width: 100%;
        height: 80rpx;
        padding: 0 60rpx 0 24rpx;
        border: 1rpx solid #d9d9d9;
        border-radius: 8rpx;
        font-size: 28rpx;
      }

      .search-icon {
        position: absolute;
        right: 24rpx;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
      }
    }

    .search-results {
      max-height: 60vh;
      overflow-y: auto;

      .search-result-item {
        border-bottom: 1rpx solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
